import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
// import { Modal } from 'antd';
import FilterBar from './FilterBar/FilterBar';
import UserTable from './UserTable/UserTable';
// import http from '../../../../common/http';

@inject('rootStore') @observer
class Ongoing extends Component {
  @observable selectedRowsLength = 0;
  @observable newsListDetails = {};
  @observable showPreviewModal = false;
  @observable previewId = 0;
  @observable showRejectReasonModal = false;
  @observable rejectReasonValue = '';
  @observable rejectId = 0;

  toDetails = (id) => {
    const { history } = this.props;

    history.push(`/user/details/${id}`)
  }

  pageOnChange = (pageNumber, pageSize) => {
    const userStore = this.props.rootStore.userStore;

    userStore.toChangePageNumber(pageNumber)
  }

  pageSizeOnChange = (current, pageSize) => {
    const userStore = this.props.rootStore.userStore;

    userStore.toChangePageSize(pageSize)
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const userStore = this.props.rootStore.userStore;

    return (
      <div className="page-content mt144">
        <FilterBar
          filterBarSearch={this.props.filterBarSearch}
          filterBarReset={this.props.filterBarReset}
          nameValue={this.props.nameValue}
          nameValueOnChange={this.props.nameValueOnChange}
          phoneValue={this.props.phoneValue}
          phoneValueOnChange={this.props.phoneValueOnChange}
        />
        <div className="list-table">
          <UserTable
            toDetails={(id) => this.toDetails(id)}
            dataSource={userStore.userList}
            dataTotal={userStore.userTotal}
            pageOnChange={this.pageOnChange}
            pageSizeOnChange={this.pageSizeOnChange}
            pageCurrent={userStore.userParam.pageIndex}
          />
        </div>
      </div>
    )
  }
}

export default Ongoing;
